<template>
    <div class="flex min-h-screen flex-col bg-[#f9f9f9]">
        <!-- 简约导航栏 -->
        <nav class="border-b border-gray-100 bg-white">
            <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
                <a href="/" class="text-2xl font-light tracking-tighter">今日头条</a>
                <div class="flex items-center space-x-4">
                    <a href="/" class="hidden text-sm font-medium transition-colors hover:text-gray-600 md:block"
                        >返回首页</a
                    >
                </div>
            </div>
        </nav>

        <!-- 注册主内容 -->
        <main class="flex flex-grow items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
            <div class="w-full max-w-md">
                <div class="auth-container rounded-lg bg-white px-10 py-8">
                    <div class="mb-8 text-center">
                        <h2 class="mb-2 text-3xl font-light tracking-tight">加入今日头条</h2>
                        <p class="text-gray-500">创建您的今日头条账户</p>
                    </div>

                    <form class="space-y-5" @submit.prevent="handleRegisterSubmit">
                        <div>
                            <label for="username" class="mb-1 block text-sm font-medium text-gray-700">用户名</label>
                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <i class="far fa-user text-gray-400"></i>
                                </div>
                                <input
                                    id="username"
                                    name="username"
                                    type="text"
                                    autocomplete="username"
                                    required
                                    class="input-field w-full rounded-lg border border-gray-200 py-3 pl-10 pr-3 focus:border-black focus:outline-none"
                                    placeholder="您的用户名"
                                />
                            </div>
                        </div>

                        <!-- <div>
                            <label for="email" class="mb-1 block text-sm font-medium text-gray-700">电子邮箱</label>
                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <i class="far fa-envelope text-gray-400"></i>
                                </div>
                                <input
                                    id="email"
                                    name="email"
                                    type="email"
                                    autocomplete="email"
                                    required
                                    class="input-field w-full rounded-lg border border-gray-200 py-3 pl-10 pr-3 focus:border-black focus:outline-none"
                                    placeholder="your@email.com"
                                />
                            </div>
                        </div> -->

                        <div>
                            <label for="password" class="mb-1 block text-sm font-medium text-gray-700">密码</label>
                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <i class="fas fa-lock text-gray-400"></i>
                                </div>
                                <input
                                    @input="checkPasswordStrength"
                                    v-model="password"
                                    id="password"
                                    name="password"
                                    :type="passwordInputElType"
                                    autocomplete="new-password"
                                    required
                                    class="input-field w-full rounded-lg border border-gray-200 py-3 pl-10 pr-3 focus:border-black focus:outline-none"
                                    placeholder="••••••••"
                                />
                                <button
                                    @click="changeShowPassword"
                                    type="button"
                                    class="absolute inset-y-0 right-0 flex items-center pr-3"
                                >
                                    <i v-if="showPassword" class="far fa-eye text-gray-400 hover:text-gray-600"></i>
                                    <i v-else class="far fa-eye-slash text-gray-400 hover:text-gray-600"></i>
                                </button>
                            </div>
                            <!-- 密码强度指示器 -->
                            <div class="mt-2" v-if="password.length > 0">
                                <div class="mb-1 flex justify-between text-xs text-gray-500">
                                    <span>密码强度</span>
                                    <span class="font-medium">{{ strengthLevel.text }}</span>
                                </div>
                                <div class="flex space-x-1">
                                    <div
                                        v-for="(item, index) in strengthLevelsArr"
                                        class="strength-bar flex-1"
                                        :class="{ active: strengthLevel.score >= item.score }"
                                        :key="index"
                                    ></div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <label for="confirmPassword" class="mb-1 block text-sm font-medium text-gray-700"
                                >确认密码</label
                            >
                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <i class="fas fa-lock text-gray-400"></i>
                                </div>
                                <input
                                    id="confirmPassword"
                                    name="confirmPassword"
                                    :type="passwordInputElType"
                                    autocomplete="new-password"
                                    required
                                    class="input-field w-full rounded-lg border border-gray-200 py-3 pl-10 pr-3 focus:border-black focus:outline-none"
                                    placeholder="••••••••"
                                />
                                <button
                                    @click="changeShowPassword"
                                    type="button"
                                    class="absolute inset-y-0 right-0 flex items-center pr-3"
                                >
                                    <i v-if="showPassword" class="far fa-eye text-gray-400 hover:text-gray-600"></i>
                                    <i v-else class="far fa-eye-slash text-gray-400 hover:text-gray-600"></i>
                                </button>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex h-5 items-center">
                                <input
                                    id="terms"
                                    name="terms"
                                    type="checkbox"
                                    required
                                    class="h-4 w-4 rounded border-gray-300 focus:ring-black"
                                />
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="terms" class="text-gray-700">
                                    我同意今日头条的
                                    <a href="#" class="auth-link font-medium text-black hover:text-gray-700"
                                        >服务条款</a
                                    >
                                    和
                                    <a href="#" class="auth-link font-medium text-black hover:text-gray-700"
                                        >隐私政策</a
                                    >
                                </label>
                            </div>
                        </div>

                        <div>
                            <button
                                type="submit"
                                class="flex w-full justify-center rounded-lg border border-transparent bg-black px-4 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
                            >
                                注册账户
                            </button>
                        </div>
                    </form>

                    <!-- <div class="mt-6">
                        <div class="relative">
                            <div class="absolute inset-0 flex items-center">
                                <div class="w-full border-t border-gray-200"></div>
                            </div>
                            <div class="relative flex justify-center text-sm">
                                <span class="bg-white px-2 text-gray-500">或使用社交账号注册</span>
                            </div>
                        </div>

                        <div class="mt-6 grid grid-cols-3 gap-3">
                            <a
                                href="#"
                                class="social-btn inline-flex w-full justify-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                            >
                                <i class="fab fa-weixin text-lg"></i>
                            </a>
                            <a
                                href="#"
                                class="social-btn inline-flex w-full justify-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                            >
                                <i class="fab fa-weibo text-lg"></i>
                            </a>
                            <a
                                href="#"
                                class="social-btn inline-flex w-full justify-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                            >
                                <i class="fab fa-google text-lg"></i>
                            </a>
                        </div>
                    </div> -->

                    <div class="mt-6 text-center">
                        <p class="text-sm text-gray-500">
                            已有账户?
                            <a :href="PageRouteEnum.LOGIN" class="auth-link font-medium text-black hover:text-gray-700">立即登录</a>
                        </p>
                    </div>
                </div>
            </div>
        </main>

        <!-- 极简页脚 -->
        <footer class="border-t border-gray-100 bg-white">
            <div class="mx-auto max-w-7xl px-6 py-8">
                <div class="flex flex-col items-center justify-between md:flex-row">
                    <div class="mb-4 md:mb-0">
                        <a href="#" class="text-xl font-light">今日头条</a>
                        <p class="mt-1 text-xs font-light text-gray-500">发现与分享每天的新鲜事</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 transition-colors hover:text-gray-800"
                            ><i class="fab fa-instagram"></i
                        ></a>
                        <a href="#" class="text-gray-500 transition-colors hover:text-gray-800"
                            ><i class="fab fa-weibo"></i
                        ></a>
                        <a href="#" class="text-gray-500 transition-colors hover:text-gray-800"
                            ><i class="fab fa-500px"></i
                        ></a>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>

<script setup lang="ts">
import { PageRouteEnum } from "@/router/routes";
import { useUserStore } from "@/stores/user";
import { Feedback } from "@/utils/feedback";

const router = useRouter();
const userStore = useUserStore();

const password = ref("");

const showPassword = ref(false);

const handleRegisterSubmit = async (e: Event) => {
    e.preventDefault();
    const { username, password, confirmPassword, terms } = e.target as HTMLFormElement;
    if (!terms.checked) {
        Feedback.msgError("请阅读并同意用户协议和隐私政策！");
        return;
    }
    if (password.value !== confirmPassword.value) {
        Feedback.msgError("两次输入的密码不一致！");
        return;
    }

    const res = await userStore.register(username.value, password.value);
    console.log("res", res);
    Feedback.msgSuccess("注册成功！");
    router.push(PageRouteEnum.LOGIN);
};

const strengthLevelsArr = [
    { text: "弱", color: "#e53e3e", score: 1 },
    { text: "较弱", color: "#ffdd57", score: 2 },
    { text: "中等", color: "#34d399", score: 3 },
    { text: "较强", color: "#10b981", score: 4 },
    { text: "强", color: "#06b6d4", score: 5 }
];

const strengthLevel = ref();

// 简单的密码强度计算
function checkPasswordStrengthLevel(password: string) {
    let score = 0;

    // 至少有一个字符
    if (password.length > 0) score = 1;

    // 至少8个字符
    if (password.length >= 6) score += 1;

    if (password.length < 3) return score;

    // 包含大写字母
    if (/[A-Z]/.test(password)) score += 1;

    // 包含小写字母
    if (/[a-z]/.test(password)) score += 1;

    // 包含特殊字符
    if (/[^A-Za-z0-9]/.test(password)) score += 1;

    return score;
}

const checkPasswordStrength = () => {
    strengthLevel.value = strengthLevelsArr.find(item => item.score === checkPasswordStrengthLevel(password.value));
};

const passwordInputElType = ref("password");

const changeShowPassword = () => {
    showPassword.value = !showPassword.value;
    passwordInputElType.value = showPassword.value ? "text" : "password";
};
</script>

<style lang="scss" scoped>
.auth-container {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02);
}

.input-field {
    transition: all 0.2s ease;
}

.input-field:focus {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.password-strength {
    transition: all 0.3s ease;
}

.social-btn {
    transition: all 0.2s ease;
}

.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.auth-link {
    transition: all 0.2s ease;
}

.auth-link:hover {
    color: #000;
}

/* 密码强度指示器样式 */
.strength-bar {
    height: 3px;
    background-color: #e5e7eb;
    transition: all 0.3s ease;
}

.strength-bar.active {
    background-color: #10b981;
}
</style>
